/* eslint-disable react/no-unused-state */
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Modal,
  Input,
  Select,
  Row,
  Col,
  message,
  Tabs,
  Spin,
  Progress,
  DatePicker,
  Tooltip,
  Divider,
  Menu,
  Dropdown,
} from 'antd';
import _ from 'lodash';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import downloadFile, { cusSome, getProPagination } from '@/utils/utils';
import StandardTable from '@/components/StandardTable';
import styles from '@/utils/utils.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
// import SingProModal from '../SingProModal';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';

import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import SearchAccoListOs from '../../components/SearchAccoListOs';
import Customer from '../../components/Customer';
import DeclareModal from '../../components/DeclareModal';
import SearchPersonEs from '../../components/SearchPersonEs';
import BatchTaskProgress from '../../components/BatchTaskProgress';
import BigwareList from '../Bigwarelist';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { TabPane } = Tabs;
const { confirm } = Modal;

@connect(({ bigaccomanage,loading}) => ({
  bigwareList: bigaccomanage.bigwareList,
  listLoading: loading.effects['bigaccomanage/fetchInsSearchList'],
 
}))
export class BasicList extends PureComponent {
  state = {
    rowSelection: [],
    fetching: false,
    visible2: false,
    proVisible: false,
    signValue: '1',
    decExcelVisible: false,
    selectedRows: [],
    mode: ['month', 'month'],
    // confirmLoading: false,
    // excelLoading: false,
    accoOwnerFlag: false,
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      login: { baseUser },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    }
    // 查询是否五险合一
    dispatch({
      type: 'reduceempsocial/getParam',
      payload: {},
    }).then(res => {
      if (res.success) {
        if (!res.data) {
          dispatch({
            type: 'reduceempsocial/updateModalData',
            payload: { isConfig: false },
          });
          Modal.warning({
            title: '重要提示',
            content: '请联系公司管理员配置参数设置',
            okText: '确定',
            onOk() {
              dispatch({
                type: 'login/logout',
              });
            },
          });
          return;
        }
        dispatch({
          type: 'reduceempsocial/updateModalData',
          payload: { isConfig: true },
        });
        this.getDic();
      } else {
        message.warning(res.message || '服务端错误');
      }
    });
    this.setState({ accoOwnerFlag: baseUser.postType === 2 });
  }

  // 字典列表
  getDic = () => {
    const {
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    const proPagination = getProPagination(activeKey, '5', pagination);
    dispatch({
      type: 'reduceempsocial/getDic',
      payload: {},
    }).then(res => {
      if (res.success) {
        this.getList(activeKey, proPagination.current, proPagination.pageSize);
      }
    });
  };

  getList(activeKey = '1', currentPage = 1, pageSize = 10, isClear = true) {
    const { dispatch, form } = this.props;
    if (isClear) {
      this.setState({
        selectedKeys: [],
        selectedRows: [],
        rowSelection: [],
      });
    }
    // 问题人员
    form.validateFieldsAndScroll(
      [
        'assArr',
        'certNo',
        'custId',
        'creId',
        'declAreaId',
        'empName',
        'insAccoName',
        'matState',
        'payWay',
        'timeDate',
        'declWay',
        'curMthDeclFlag',
        'operTime',
        'accoRespId',
        'insAccoId'
      ],
      (err, values) => {
        if (!err) {
          dispatch({
            type: 'reduceempsocial/updateModalData',
            payload: {
              formFieldsValue: values,
              activeKey,
            },
          });
          const tempFieldsValue = {};
          if (activeKey && Number(activeKey) === 5) {
            this.getProList(currentPage, pageSize);
            return;
          }
          Object.keys(values).forEach(key => {
            if (key === 'timeDate') {
              tempFieldsValue.startDate =
                (values.timeDate && values.timeDate[0] && values.timeDate[0].valueOf()) || null;
              tempFieldsValue.endDate =
                (values.timeDate && values.timeDate[1] && values.timeDate[1].valueOf()) || null;
            } else if (key === 'operTime') {
              tempFieldsValue.operBeginDate =
                (values.operTime && values.operTime[0] && values.operTime[0].valueOf()) || null;
              tempFieldsValue.operEndDate =
                (values.operTime && values.operTime[1] && values.operTime[1].valueOf()) || null;
            } else if (key === 'assArr') {
              tempFieldsValue[key] = values[key];
            } else {
              tempFieldsValue[key] =
                values[key] === undefined || values[key] === null ? null : values[key].trim();
            }
          });
          const copyAll = {
            currentPage,
            pageSizes: pageSize,
            execStep: Number(activeKey),
            ...tempFieldsValue,
            curMthDeclFlag: Number(activeKey) === 1 ? tempFieldsValue.curMthDeclFlag : undefined,
            declWay: Number(activeKey) === 2 ? tempFieldsValue.declWay : undefined,
          };
          dispatch({
            type: 'reduceempsocial/updateModalData',
            payload: {
              copyAll,
            },
          });
          dispatch({
            type: 'reduceempsocial/getSocialReduce',
            payload: copyAll,
          });
        }
      }
    );
  }

  onExecState = () => {
    const {
      activeKey,
      pageData: { pagination },
    } = this.props;
    setTimeout(() => {
      this.getList(activeKey, pagination.current, pagination.pageSize);
    }, 0);
  };

  // 问题人员获取数据
  getProList(currentPage, pageSize) {
    const { dispatch, form } = this.props;
    form.validateFieldsAndScroll(
      [
        'assArr',
        'certNo',
        'custId',
        'creId',
        'declAreaId',
        'empName',
        'insAccoName',
        'matState',
        'payWay',
        'timeDate',
        'operTime',
      ],
      (err, values) => {
        const tempValues = values;
        if (!err) {
          dispatch({
            type: 'reduceempsocial/updateModalData',
            payload: {
              formFieldsValue: tempValues,
            },
          });
          Object.keys(tempValues).forEach(key => {
            if (key === 'timeDate') {
              tempValues.startDate =
                (tempValues.timeDate &&
                  tempValues.timeDate[0] &&
                  tempValues.timeDate[0].valueOf()) ||
                null;
              tempValues.endDate =
                (tempValues.timeDate &&
                  tempValues.timeDate[1] &&
                  tempValues.timeDate[1].valueOf()) ||
                null;
            } else if (key === 'operTime') {
              tempValues.operBeginDate =
                (tempValues.operTime &&
                  tempValues.operTime[0] &&
                  tempValues.operTime[0].valueOf()) ||
                null;
              tempValues.operEndDate =
                (tempValues.operTime &&
                  tempValues.operTime[1] &&
                  tempValues.operTime[1].valueOf()) ||
                null;
            }
          });
          const params = {
            busiType: 15,
            ...tempValues,
            certId: tempValues.certNo,
            probObjArr: tempValues.assArr,
          };
          delete params.assArr;
          delete params.certNo;
          delete params.operTime;
          setTimeout(() => {
            const { proTable } = this.state;
            const proFormFieldsValue = { ...params };
            dispatch({
              type: 'reduceempsocial/updateModalData',
              payload: {
                proFormFieldsValue,
              },
            });
            if (proTable.searchList) {
              proTable.searchList(proFormFieldsValue, currentPage, pageSize);
            }
          });
        }
      }
    );
  }

  // 线下申报
  showConfirm = () => {
    const {
      pageData: { list },
      dispatch,
      reduceempsocial: { copyAll },
    } = this.props;
    const { rowSelection } = this.state;
    if (rowSelection && rowSelection.length === 0) {
      if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行线下申报？',
          okText: '是',
          cancelText: '否',
          icon: <QuestionCircleOutlined />,
          onOk: () => {
            dispatch({
              type: 'reduceempsocial/showConfirm',
              payload: copyAll,
            });
          },
          onCancel() {},
        });
      }
    } else if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{rowSelection.length}</span>
            条数据进行线下申报？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        onOk: () => {
          const tempArr = [];
          rowSelection.forEach(value => {
            const tempJson = {};
            tempJson.deduDetId = value.deduDetId;
            tempJson.vno = value.vno;
            tempArr.push(tempJson);
          });
          dispatch({
            type: 'reduceempsocial/showConfirm',
            payload: {
              insDeduDets: tempArr,
            },
          });
          this.setState({
            selectedKeys: [],
            selectedRows: [],
            rowSelection: [],
          });
        },
        okText: '是',
        cancelText: '否',
        onCancel() {},
      });
    }
  };

  // 线下申报错误下载
  showUnderDownDeclErr = (count, batNo) => {
    Modal.warning({
      title: (
        <Row>
          <Row>
            当前存在<span className="emphasize-text">{count}条</span>数据不可申报，请下载查看。
          </Row>
          <a
            onClick={() =>
              this.download('/osApi/insDeduDet/syncInsDeduUnderLineDeclErrMessage', { batNo })
            }
          >
            下载
          </a>
        </Row>
      ),
      okText: '关闭',
      okType: 'default',
      autoFocusButton: 'cancel',
    });
  };

  // 运行备注详情
  textChangeR = e => {
    this.setState({
      textR: e.target.value,
    });
  };

  // 翻译字典值
  getDicCode = (dicList, code) => {
    let tempData;
    const { reduceempsocial } = this.props;
    reduceempsocial[dicList].map(item => {
      if (Number(item.itemCode) === Number(code)) {
        tempData = item.itemName;
      }
      return true;
    });
    return tempData;
  };

  reset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ operTime: null, timeDate: null });
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: {
        formFieldsValue: {},
      },
    });
  };

  goEdit = record => {
    const detailId = record.deduDetId;
    router.push(`/socialinsurancemanagement/insdepletion/update?deduDetId=${detailId}`);
  };

  // 办理备注
  editMark = record => {
    this.setState({
      remarkVisible: true,
      busiId: record.deduDetId,
      textR: '',
      sendId: record.sendId,
      taskId: record.taskId,
    });
  };

  remarkOk = () => {
    const {
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    const { busiId, textR, sendId, taskId } = this.state;
    const obj = Object.assign({}, { busiId, content: textR, sendId, taskId });
    // 执行结果
    dispatch({
      type: 'reduceempsocial/remarkOk',
      payload: obj,
    }).then(res => {
      if (res.success) {
        this.setState({
          remarkVisible: false,
        });
        this.getList(activeKey, pagination.currentPage, pagination.pageSize);
      }
    });
  };

  remarkCancel = () => {
    this.setState({
      remarkVisible: false,
    });
  };
 // 获取大库列表
 onSearch = value => {
  const { dispatch } = this.props;
  if (value.trim().length) {
    dispatch({
      type: 'bigaccomanage/fetchInsSearchList',
      payload: { accoName: value.trim() },
    });
  }
};
  // 标记申报成功弹框执行结果改变change
  handleChange = value => {
    this.setState({
      signValue: value,
    });
  };

  // 下载
  download = (url, param) => {
    downloadFile(param, url, 'POST');
  };

  goProgress = () => {
    router.push('/socialinsurancemanagement/insdepletion/progress');
  };

  // 批量修改
  batchModify = () => {
    router.push('/socialinsurancemanagement/insdepletion/batchModify');
  };

  exportExcel = () => {
    const { selectedKeys } = this.state;
    const { formFieldsValue } = this.props;
    const obj = {
      ...formFieldsValue,
      busiType: 15,
      detIds: selectedKeys,
    };
    if (selectedKeys.length) {
      // this.setState({ excelLoading: true });
      downloadFile(obj, '/osApi/problem/ins/export', 'POST', () => {
        // this.setState({ excelLoading: false });
      });
    } else {
      confirm({
        title: '请选择数据，如不选择，默认导出当前条件下所有数据！',
        okText: '导出',
        icon: <QuestionCircleOutlined />,
        cancelText: '取消',
        onOk: () => {
          downloadFile(obj, '/osApi/problem/ins/export', 'POST');
        },
      });
    }
  };

  // 手动申报 结果导入  弹框  确定
  handleOk2 = () => {
    this.setState({
      visible2: false,
    });
  };

  // 手动申报 材料下载  弹框  取消
  handleCancel2 = () => {
    this.setState({
      visible2: false,
    });
  };

  // 标记问题人员
  proHandleOk = () => {
    const {
      activeKey,
      pageData: { pagination },
    } = this.props;
    this.setState({
      proVisible: false,
    });
    this.getList(activeKey, pagination.currentPage, pagination.pageSize);
  };

  // 手动申报 材料下载  弹框  取消
  handleCancel3 = () => {
    this.setState({
      proVisible: false,
    });
  };

  // 标记问题人员
  signProblem = () => {
    const { rowSelection } = this.state;
    const { form } = this.props;
    if (!this.rowValidate()) {
      return;
    }
    if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      this.setState({
        proVisible: true,
      });
      form.resetFields();
    }
  };

  // 标记申报成功
  handleOk5 = () => {
    this.setState({
      visible5: false,
    });
  };

  handleCancel5 = () => {
    this.setState({
      visible5: false,
    });
  };

  // 标记申报成功
  signSuccess = () => {
    const {
      activeKey,
      dispatch,
      pageData: { pagination },
    } = this.props;
    const { rowSelection } = this.state;
    if (!this.rowValidate()) {
      return;
    }
    if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      const tempArr = [];
      rowSelection.forEach(value => {
        const tempJson = {};
        tempJson.deduDetId = value.deduDetId;
        tempJson.vno = value.vno;
        tempArr.push(tempJson);
      });
      const confirmReference = confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{rowSelection.length}</span>
            条数据标记申报成功？
          </div>
        ),
        okText: '是',
        icon: <QuestionCircleOutlined />,
        cancelText: '否',
        onCancel: () => {},
        onOk: () => {
          confirmReference.update({
            okButtonProps: { loading: true },
          });
          // return new Promise(resolve => {
          //   dispatch({
          //     type: 'reduceempsocial/signSuccess',
          //     payload: {
          //       insDeduDets: tempArr,
          //     },
          //   }).then(res => {
          //     if (res.success) {
          //       this.getList(activeKey, pagination.current, pagination.pageSize);
          //     }
          //     resolve();
          //   });
          // });
          // 走socket异步
          dispatch({
            type: 'reducesocialbatch/uploadFileWithProgress',
            payload: {
              params: {
                insDeduDets: tempArr,
              },
              type: '1',
            },
          });
        },
      });
    }
  };

  dateChange = date => {
    const { form } = this.props;

    if (date && date[0]) {
      date[0].endOf('month').format('YYYY-MM-DD');
    }
    if (date && date[1]) {
      date[1].endOf('month').format('YYYY-MM-DD');
    }

    form.setFieldsValue({
      timeDate: date,
    });
  };

  rowValidate = () => {
    const { rowSelection } = this.state;
    if (!rowSelection || rowSelection.length === 0) {
      message.warning('请至少选择一项！');
      return false;
    }
    return true;
  };

  // 网上申报按钮
  onDeclare = () => {
    const { rowSelection } = this.state;
    const {
      pageData: { list },
      reduceempsocial: { copyAll },
      dispatch,
    } = this.props;
    if (!rowSelection || rowSelection.length === 0) {
      if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行网上申报？',
          okText: '是',
          cancelText: '否',
          icon: <QuestionCircleOutlined />,
          onOk: () => {
            dispatch({
              type: 'reduceempsocial/onDeclare',
              payload: copyAll,
            });
          },
          onCancel() {},
        });
      }
    } else if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{rowSelection.length}</span>
            条数据进行网上申报？
          </div>
        ),
        onOk: () => {
          this.onLineApply();
        },
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onCancel() {},
      });
    }
  };

  // 网上申报接口
  onLineApply = () => {
    const { dispatch } = this.props;
    const { rowSelection } = this.state;
    const tempArr = [];
    rowSelection.forEach(value => {
      tempArr.push({ deduDetId: value.deduDetId, vno: value.vno });
    });
    dispatch({
      type: 'reduceempsocial/onLineApply',
      payload: {
        insDeduDets: tempArr,
      },
    });
    this.setState({
      selectedKeys: [],
      rowSelection: [],
    });
  };

  tabChange = value => {
    const { location, dispatch, form } = this.props;
    form.setFieldsValue({
      curMthDeclFlag: '1',
      declWay: '0',
    });
    router.push({
      pathname: location.pathname,
      query: { activeKey: value },
    });
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: {
        activeKey: value,
      },
    });
    this.setState({
      selectedKeys: [],
      rowSelection: [],
    });
    this.getList(value);
  };

  // 状态
  curMthChange = () => {
    const { activeKey } = this.props;
    setTimeout(() => {
      this.getList(activeKey);
    }, 0);
  };

  // 取消申报
  cancleApply = () => {
    const { rowSelection } = this.state;
    if (!this.rowValidate()) {
      return;
    }
    if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{rowSelection.length}</span>
            条数据进行取消申报？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        onOk: () => {
          const tempArr = [];
          const {
            activeKey,
            dispatch,
            pageData: { pagination },
          } = this.props;
          rowSelection.forEach(value => {
            const tempJson = {};
            tempJson.deduDetId = value.deduDetId;
            tempJson.vno = value.vno;
            tempArr.push(tempJson);
          });
          // dispatch({
          //   type: 'reduceempsocial/cancleApply',
          //   payload: {
          //     insDeduDets: tempArr,
          //     execStep: activeKey,
          //   },
          // }).then(res => {
          //   if (res.success) {
          //     this.getList(activeKey, pagination.current, pagination.pageSize);
          //   }
          // });
          // 改为异步socket
          dispatch({
            type: 'reducesocialbatch/uploadFileWithProgress',
            payload: {
              params: {
                insDeduDets: tempArr,
                execStep: activeKey,
              },
              type: '2',
            },
          });
        },
        okText: '是',
        cancelText: '否',
        onCancel() {},
      });
    }
  };

  // 申报失败
  signFail = () => {
    const {
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    const { rowSelection } = this.state;
    if (!this.rowValidate()) {
      return;
    }
    if (cusSome(rowSelection, 'probFlag', 1)) {
      message.error('问题人员无法做相关操作');
    } else {
      const arr = [];
      rowSelection.forEach(value => {
        const tempJson = {};
        tempJson.deduDetId = value.deduDetId;
        tempJson.vno = value.vno;
        arr.push(tempJson);
      });
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{rowSelection.length}</span>
            条数据标记申报失败？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onCancel: () => {},
        onOk: () => {
          dispatch({
            type: 'reduceempsocial/signFail',
            payload: {
              insDeduDets: arr,
            },
          }).then(temp => {
            if (temp.success) {
              this.getList(activeKey, pagination.currentPage, pagination.pageSize);
            }
          });
        },
      });
    }
  };

  batchFeedback = () => {
    router.push('/socialinsurancemanagement/insdepletion/batchFeedback?busiType=15');
  };

  // 地区
  changeArea = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: {
        result: [],
      },
    });
    this.setState({ fetching: true });
    dispatch({
      type: 'reduceempsocial/changeArea',
      payload: { areaName: value },
    });
  };

  goDetail = record => {
    const detailId = record.deduDetId;
    router.push(`/socialinsurancemanagement/insdepletion/detail?deduDetId=${detailId}`);
  };

  // 查询表格布局
  toggleForm = () => {
    const { expandForm, dispatch } = this.props;
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: {
        expandForm: !expandForm,
      },
    });
  };

  // 申报明细表导出
  declareExport = () => {
    const {
      activeKey,
      pageData: { list },
      dispatch,
      reduceempsocial: { copyAll },
    } = this.props;
    const { selectedKeys } = this.state;
    const declWay = Number(activeKey) === 2 ? 2 : undefined;
    if (list.length > 0) {
      dispatch({
        type: 'reduceempsocial/updateModalData',
        payload: {
          downParam: {
            deduDetIds: selectedKeys,
            ...copyAll,
            declWay,
          },
        },
      });
      this.setState({ declWay }, () => {
        this.getDeclList(1, 5);
      });
    } else {
      message.warning('无查询结果，不可导出！');
    }
  };

  pageChange = (current, pageSizes) => {
    this.getDeclList(current, pageSizes);
  };

  pageSizeChange = (current, pageSizes) => {
    this.getDeclList(current, pageSizes);
  };

  getDeclList = (currentPage, pageSize) => {
    const {
      dispatch,
      reduceempsocial: { copyAll },
    } = this.props;
    const { selectedKeys, declWay } = this.state;
    this.setState({
      tableLoading: true,
    });
    dispatch({
      type: 'reduceempsocial/getDeclList',
      payload: {
        deduDetIds: selectedKeys,
        ...copyAll,
        declWay,
        // pagerArg: {
        //   currentPage,
        //   pageSize,
        // },
      },
    }).then(() => {
      this.setState({
        decExcelVisible: true,
        tableLoading: false,
      });
    });
  };

  downSingleClick = values => {
    const {
      reduceempsocial: { downParam },
    } = this.props;
    const { insDeclExportId } = values;
    downloadFile(
      {
        ...downParam,
        insDeclExportId,
      },
      '/osApi/insDeduDet/insDeclDetSingleExport',
      'POST'
    );
  };

  // 进度弹框显隐
  handleProgressModalVisible = flag => {
    const {
      activeKey,
      pageData: { pagination },
      dispatch,
    } = this.props;
    if (!flag) {
      dispatch({
        type: 'reducesocialbatch/updateModelData',
        payload: {
          showProgress: false,
        },
      });
      this.getList(activeKey, pagination.current, pagination.pageSize);
    }
  };

  onDeclareCancel = () => {
    this.setState({
      decExcelVisible: false,
    });
  };

  onDeclareOk = () => {
    const {
      reduceempsocial: { downParam },
    } = this.props;
    downloadFile(downParam, '/osApi/insDeduDet/downloadDeclDetInsDeduImport', 'POST');
    this.setState({
      decExcelVisible: false,
    });
  };

  // 导出excel
  exportData = () => {
    const {
      pageData: { list },
      reduceempsocial: { copyAll },
      activeKey,
    } = this.props;
    const { selectedKeys } = this.state;
    if (!selectedKeys || selectedKeys.length === 0) {
      // 如果不选择数据，下载全部
      if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行导出？',
          okText: '是',
          icon: <QuestionCircleOutlined />,
          cancelText: '否',
          onOk: () => {
            switch (activeKey) {
              case '1':
                this.download('/osApi/insDeduDetExt/expInsDeduToDecl', copyAll);
                break;
              case '2':
                this.download('/osApi/insDeduDetExt/expInsDeduToDecling', copyAll);
                break;
              case '3':
                this.download('/osApi/insDeduDetExt/expInsDeduToDecled', copyAll);
                break;
              default:
                break;
            }
          },
          onCancel() {},
        });
      }
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedKeys.length}</span>
            条数据进行导出？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const objAll = {
            deduDetIds: selectedKeys,
            ...copyAll,
          };
          switch (activeKey) {
            case '1':
              this.download('/osApi/insDeduDetExt/expInsDeduToDecl', objAll);
              break;
            case '2':
              this.download('/osApi/insDeduDetExt/expInsDeduToDecling', objAll);
              break;
            case '3':
              this.download('/osApi/insDeduDetExt/expInsDeduToDecled', objAll);
              break;
            default:
              break;
          }
        },
        onCancel() {},
      });
    }
  };

  handleSelectRows = (selectedRows, selectedKeys) => {
    const newRows = _.cloneDeep(selectedRows);
    const newKeys = _.cloneDeep(selectedKeys);
    this.setState({ selectedRows: newRows, selectedKeys: newKeys, rowSelection: newRows });
  };

  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, false);
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    dispatch({
      type: 'reduceempsocial/updateModalData',
      payload: { expandForm: Boolean(queryParam) },
    });
    await this.reset();
    await this.getList(location.query.activeKey);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const {
      fetching,
      decExcelVisible,
      declInParam,
      tableLoading,
      selectedKeys,
      selectedRows,
      mode,
      textR,
      visible2,
      proVisible,
      remarkVisible,
      visible5,
      signValue,
      accoOwnerFlag,
    } = this.state;
    const {
      loading,
      formFieldsValue,
      activeKey,
      proPageData,
      pageData,
      expandForm,
      proFormFieldsValue,
      form: { getFieldDecorator },
      reduceempsocial: {
        execStepList,
        curMthDeclFlagList,
        payWayList,
        declData,
        pdOptionList,
        result,
        progressPercent,
        isConfig,
        showProgress,
        tag,
      },
      reducesocialbatch,
      bigwareList,
      listLoading,
    } = this.props;
    const children = result.map(email => <Option key={email.areaId}>{email.areaName}</Option>);
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
    const formItemLayoutState = {
      labelCol: { md: { span: 8 } },
      wrapperCol: { md: { span: 16 } },
    };
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'declAreaName',
        width: 95,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行账户',
        dataIndex: 'insAccoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => text || '--',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '网报反馈',
        dataIndex: 'exexFdbk',
        className: Number(activeKey) === 4 ? styles.show : styles.hide,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (
          <Tooltip title={text}>
            <span
              style={{
                display: 'inline-block',
                width: 140,
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
              }}
            >
              {text || '--'}
            </span>
          </Tooltip>
        ),
      },
      {
        title: '险种',
        dataIndex: 'ass',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 60 } }),
        render: (text, record) =>
          Number(record.insMergFlag) === 1 ? '社保' : this.getDicCode('pdAttrList', text),
      },
      {
        title: '派单时间',
        dataIndex: 'creTime',
        className: styles.hide,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text =>
          text ? (
            <span style={{ minWidth: 60 }}>{moment(text).format('YYYY-MM-DD HH:mm')}</span>
          ) : (
            '--'
          ),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.goDetail(record)}
            >
              {' '}
              查看
            </span>
            {+activeKey === 6 ? null : (
              <Fragment>
                <Divider type="vertical" />
                <span
                  style={{ color: '#1890FF', cursor: 'pointer', marginLeft: 4 }}
                  onClick={() => this.editMark(record)}
                >
                  办理备注
                </span>
              </Fragment>
            )}
          </div>
        ),
      },
    ];
    const columns5 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
      },
      {
        title: '证件号',
        dataIndex: 'certId',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '问题对象',
        dataIndex: 'probObj',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '问题类型',
        dataIndex: 'probTypeIdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '所属客服',
        dataIndex: 'blngCs',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => text || '--',
      },
      {
        title: '提出时间',
        dataIndex: 'creTime',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => moment(text).format('YYYY-MM-DD HH:mm'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/socialinsurancemanagement/insdepletion/problem?detId=${record.detId}`
                );
              }}
            >
              {' '}
              查看
            </span>
          </div>
        ),
      },
    ];
    const formItemLayout2 = {
      labelCol: { md: { span: 4 } },
      wrapperCol: { md: { span: 18 } },
    };

    const delMore = (
      <Menu>
        {checkPermissions('os:accuAddDet:signProbFlag') && (
          <Menu.Item>
            <span onClick={this.signProblem}>标记问题人员</span>
          </Menu.Item>
        )}
        {checkPermissions('os:insDeduDet:batchUpdInsDeduDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
        <Menu.Item
          onClick={() => router.push(`/socialinsurancemanagement/insdepletion/batchDeclaration`)}
        >
          <span>批量标记申报中</span>
        </Menu.Item>
        <Menu.Item onClick={this.exportData}>
          <span>导出</span>
        </Menu.Item>
      </Menu>
    );
    const declareMenu = (
      <Menu>
        {checkPermissions('os:insDeduDet:insDeduImport') && (
          <Menu.Item>
            <a onClick={this.goProgress}>申报结果导入</a>
          </Menu.Item>
        )}
        {checkPermissions('os:insDeduDet:completeDecl') && (
          <Menu.Item>
            <a onClick={this.signSuccess}>标记申报成功</a>
          </Menu.Item>
        )}
        {/* {checkPermissions('os:insDeduDet:declFail') && (
          <Menu.Item>
            <a onClick={this.signFail}>标记申报失败</a>
          </Menu.Item>
        )} */}
      </Menu>
    );
    // 更多（材料下载，申报明细表导出）
    const ingMore = (
      <Menu>
        {checkPermissions('os:insDeduDet:cancelDecl') && (
          <Menu.Item>
            <a onClick={this.cancleApply}>取消申报</a>
          </Menu.Item>
        )}
        {checkPermissions('os:insDeduDet:downloadDeclDetInsDeduImport') && (
          <Menu.Item>
            <a onClick={this.declareExport}>申报明细表导出</a>
          </Menu.Item>
        )}
        {checkPermissions('os:insDeduDet:batchUpdInsDeduDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
        <Menu.Item>
          <span onClick={this.exportData}>导出</span>
        </Menu.Item>
      </Menu>
    );
    const cancleMore = (
      <Menu>
        {checkPermissions('os:insDeduDet:signProbFlag') && (
          <Menu.Item>
            <a onClick={this.signProblem}>标记问题人员</a>
          </Menu.Item>
        )}
        {/* {checkPermissions('os:insDeduDet:downloadDeclDetInsDeduImport') && (
          <Menu.Item>
            <a onClick={this.declareExport}>申报明细表导出</a>
          </Menu.Item>
        )} */}
        {checkPermissions('os:insDeduDet:batchUpdInsDeduDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
      </Menu>
    );
    const tabArr1 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Authorized authority="os:insDeduDet:onLineDecl" noMatch={null}>
              <Button type="primary" onClick={this.onDeclare} style={{ marginRight: 8 }}>
                网上申报
              </Button>
            </Authorized>
            <Authorized authority="os:insDeduDet:underLineDecl" noMatch={null}>
              <Button style={{ marginRight: 8 }} onClick={this.showConfirm}>
                线下申报
              </Button>
            </Authorized>
            <Dropdown overlay={delMore}>
              <Button>
                更多 <DownOutlined />
              </Button>
            </Dropdown>
          </div>
          <div style={{ width: 201 }} className={styles.tabSelect}>
            <FormItem {...formItemLayoutState} label="状态">
              {getFieldDecorator('curMthDeclFlag', {
                initialValue: formFieldsValue.curMthDeclFlag || '1',
              })(
                <Select style={{ width: 130 }} onChange={this.curMthChange}>
                  {curMthDeclFlagList.map(value => (
                    <Option value={value.itemCode} key={value.itemCode}>
                      {value.itemName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </div>
        </div>
      </div>
    );
    const tabArr2 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Row>
              <Dropdown overlay={declareMenu}>
                <Button type="primary" style={{ marginRight: 8 }}>
                  申报完成
                </Button>
              </Dropdown>
              <Authorized authority="os:insDeduDet:signProbFlag" noMatch={null}>
                <Button style={{ marginRight: 8 }} onClick={this.signProblem}>
                  标记问题人员
                </Button>
              </Authorized>
              <Dropdown overlay={ingMore}>
                <Button>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            </Row>
          </div>
          <div className={styles.tabSelect}>
            <Form>
              <FormItem {...formItemLayoutState} label="申报状态">
                {getFieldDecorator('declWay', {
                  rules: [{ required: false }],
                  initialValue: formFieldsValue.declWay || '0',
                })(
                  <Select style={{ width: 136 }} onChange={this.onExecState}>
                    <Option value="0">全部</Option>
                    <Option value="1">网上申报</Option>
                    <Option value="2">线下申报</Option>
                  </Select>
                )}
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    );
    const tabArr3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="os:insDeduDet:cancelDeclButShow" noMatch={null}>
            <Button type="primary" style={{ marginRight: 8 }} onClick={this.cancleApply}>
              取消申报
            </Button>
          </Authorized>
          <Authorized authority="" noMatch={null}>
            <Button onClick={this.exportData}>
              导出
            </Button>
          </Authorized>
        </Row>
      </div>
    );
    const tabArr4 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="os:insDeduDet:onLineDecl" noMatch={null}>
            <Button type="primary" onClick={this.onDeclare} style={{ marginRight: 8 }}>
              网上申报
            </Button>
          </Authorized>
          <Authorized authority="os:insDeduDet:underLineDecl" noMatch={null}>
            <Button style={{ marginRight: 8 }} onClick={this.showConfirm}>
              线下申报
            </Button>
          </Authorized>
          <Dropdown overlay={cancleMore}>
            <Button>
              更多 <DownOutlined />
            </Button>
          </Dropdown>
        </Row>
      </div>
    );
    const tabArr5 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="os:insDeduProb:addProbFdbk" noMatch={null}>
            <Button type="primary" onClick={this.batchFeedback} style={{ marginRight: 8 }}>
              批量反馈
            </Button>
          </Authorized>
          <Authorized authority="os:insDeduDet:exportInsDedu" noMatch={null}>
            <ProExportBtn selectedRowKeys={selectedKeys} downloadParams={proFormFieldsValue} />
          </Authorized>
        </Row>
      </div>
    );
    const tabArr6 = null;
    const tabArr = [tabArr1, tabArr2, tabArr3, tabArr4, tabArr5, tabArr6];
    const renderSimpleForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="客户名称">
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
                rules: [{ required: false }],
              })(<Customer attr />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="执行地">
              {getFieldDecorator('declAreaId', {
                initialValue: formFieldsValue.declAreaId,
                rules: [{ required: false }],
              })(
                <Select
                  filterOption={false}
                  allowClear
                  optionFilterProp="children"
                  showSearch
                  onSearch={this.changeArea}
                  notFoundContent={fetching ? <Spin size="small" /> : '暂无数据'}
                  style={{ width: '100%' }}
                  placeholder="请输入"
                >
                  {children}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.reset}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
    const renderAdvancedForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="客户名称">
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
                rules: [{ required: false }],
              })(<Customer attr />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="执行地">
              {getFieldDecorator('declAreaId', {
                initialValue: formFieldsValue.declAreaId,
                rules: [{ required: false }],
              })(
                <Select
                  filterOption={false}
                  showSearch
                  onSearch={this.changeArea}
                  notFoundContent={fetching ? <Spin size="small" /> : '暂无数据'}
                  style={{ width: '100%' }}
                  placeholder="请输入"
                >
                  {children}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="所属客服">
              {getFieldDecorator('creId', {
                initialValue: formFieldsValue.creId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
          {/* <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="所属客服">
              {getFieldDecorator('custSerRespName', {
                initialValue: formFieldsValue.custSerRespName,
                rules: [{ required: false }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col> */}
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="业务结束日期">
              {getFieldDecorator('timeDate', {
                initialValue: formFieldsValue.timeDate,
                rules: [{ required: false }],
              })(
                <RangePicker
                  placeholder={['开始日期', '结束日期']}
                  mode={mode}
                  format="YYYY-MM-DD"
                  onChange={this.dateChange}
                  onPanelChange={this.dateChange}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="姓名">
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
                rules: [{ required: false }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="证件号">
              {getFieldDecorator('certNo', {
                initialValue: formFieldsValue.certNo,
                rules: [{ required: false }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="险种">
              {getFieldDecorator('assArr', {
                initialValue: formFieldsValue.assArr,
                rules: [{ required: false }],
              })(
                <Select
                  showSearch
                  placeholder="请选择"
                  filterOption={false}
                  allowClear
                  optionFilterProp="children"
                  mode="multiple"
                >
                  {pdOptionList.map(value => (
                    <Option value={value.itemCode} key={value.itemCode}>
                      {value.itemName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="缴费方式">
              {getFieldDecorator('payWay', {
                initialValue: formFieldsValue.payWay,
                rules: [{ required: false }],
              })(
                <Select
                  showSearch
                  placeholder="请选择"
                  filterOption={false}
                  allowClear
                  optionFilterProp="children"
                >
                  {payWayList.map(value => (
                    <Option value={value.itemCode} key={value.itemCode}>
                      {value.itemName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            {/* <FormItem {...formItemLayout} label="执行账户">
              {getFieldDecorator('insAccoName', {
                initialValue: formFieldsValue.insAccoName,
                rules: [{ required: false }],
              })(<Input placeholder="请输入" />)}
            </FormItem> */}
            <FormItem label="执行账户" {...formItemLayout}>
              {getFieldDecorator('insAccoId', {
                initialValue: formFieldsValue.insAccoId,
              })(
                <BigwareList
                  placeholder="请输入"
                  onSearch={this.onSearch}
                  bigwareList={bigwareList}
                  loading={listLoading}
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...formItemLayout}>
              {getFieldDecorator('operTime', {
                initialValue: formFieldsValue.operTime,
              })(<RangePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          {accoOwnerFlag && (
            <Col md={8} sm={24}>
              <FormItem label="账户负责人" {...formItemLayout}>
                {getFieldDecorator('accoRespId', {
                  initialValue: formFieldsValue.accoRespId,
                })(
                  <SearchAccoListOs
                    allowClear
                    showSearch
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  />
                )}
              </FormItem>
            </Col>
          )}
          <Col md={8} sm={24} offset={!accoOwnerFlag ? 8 : 0}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={() => this.getList(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.reset}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
    const renderForm = expandForm ? renderAdvancedForm : renderSimpleForm;
    if (!isConfig) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <Spin size="large" />
        </div>
      );
    }
    return (
      <div>
        <PageHeaderWrapper>
          <Card className={styles.searchCard}>
            <div className={styles.tableListForm}>{renderForm}</div>
          </Card>
          <Card className={styles.tabCard}>
            <div className={styles.tableList}>
              <Tabs activeKey={activeKey} onChange={this.tabChange}>
                {execStepList.map((value, index) => (
                  <TabPane tab={value.itemName} key={value.itemCode}>
                    {tabArr[index]}
                    {index !== 3 ? (
                      <StandardTable
                        selectedRows={selectedRows}
                        loading={loading}
                        selectedRowKeys={selectedKeys}
                        data={+activeKey === 5 ? proPageData : pageData}
                        columns={+activeKey === 5 ? columns5 : columns}
                        rowKey={+activeKey === 5 ? 'detId' : 'deduDetId'}
                        onSelectRow={this.handleSelectRows}
                        onChange={this.handleStandardTableChange}
                      />
                    ) : (
                      <ProTable
                        onRef={e => {
                          this.setState({ proTable: e });
                        }}
                        selectedRows={selectedRows}
                        selectedRowKeys={selectedKeys}
                        onSelectRow={this.handleSelectRows}
                        proUrl="/socialinsurancemanagement/insdepletion/problem"
                        busiType="15"
                      />
                    )}
                  </TabPane>
                ))}
              </Tabs>
            </div>
          </Card>
          <Modal
            title="申报结果导入"
            visible={visible2}
            onOk={this.handleOk2}
            onCancel={this.handleCancel2}
          >
            <div style={{ textAlign: 'center' }}>
              <Button type="primary">模板下载</Button>
              <Button type="primary" style={{ marginLeft: 30 }}>
                导入
              </Button>
            </div>
          </Modal>
          {proVisible && (
            <ProModal
              selectedRows={selectedRows}
              selectedRowKeys={selectedKeys}
              busiType="15"
              onOk={this.proHandleOk}
              onCancel={this.handleCancel3}
              isProType
            />
          )}
          <Modal
            title="标记申报成功"
            visible={visible5}
            onOk={this.handleOk5}
            onCancel={this.handleCancel5}
          >
            <div>
              <Row>
                <Col>
                  <FormItem {...formItemLayout2} label="执行结果">
                    <Select
                      defaultValue={signValue}
                      style={{ width: 120 }}
                      onChange={this.handleChange}
                    >
                      <Option value="1">申报成功</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
            </div>
          </Modal>
          <Modal
            title="办理备注"
            visible={remarkVisible}
            onOk={this.remarkOk}
            onCancel={this.remarkCancel}
          >
            <Form style={{ lineHeight: '40px' }}>
              <FormItem>
                <Row>
                  <Col span={6}>运行备注详情 :</Col>
                </Row>
                <Row>
                  <Col span={20}>
                    <Row>
                      <TextArea
                        placeholder="请输入..."
                        value={textR}
                        onChange={this.textChangeR}
                        autoSize={{ minRows: 3, maxRows: 6 }}
                      />
                    </Row>
                  </Col>
                </Row>
              </FormItem>
            </Form>
          </Modal>
          {showProgress && (
            <Modal
              title={tag === 'online' ? '网上申报' : '线下申报'}
              footer={null}
              closable={false}
              visible={showProgress}
            >
              <div style={{ textAlign: 'center' }}>
                <div>
                  <Progress
                    percent={progressPercent}
                    format={percent => `${percent}%`}
                    style={{ paddingRight: 24, marginBottom: 20 }}
                  />
                </div>
              </div>
            </Modal>
          )}
          <DeclareModal
            visible={decExcelVisible}
            inParam={declInParam}
            dataSource={declData}
            tableLoading={tableLoading}
            downSingleClick={this.downSingleClick}
            onCancel={this.onDeclareCancel}
            pageChange={this.pageChange}
            pageSizeChange={this.pageSizeChange}
            onOk={this.onDeclareOk}
            declExportId="insDeclExportId"
            accoName="insAccoName"
          />
          <BatchTaskProgress
            progressVisible={reducesocialbatch.showProgress}
            progressPercent={reducesocialbatch.progressPercent || 0}
            isShowResult={reducesocialbatch.progressPercent === 100}
            resultInfo={reducesocialbatch.resultInfo}
            handleProgressModalVisible={this.handleProgressModalVisible}
            maskClosable={false}
          />
        </PageHeaderWrapper>
      </div>
    );
  }
}
export default connect(({ reduceempsocial, loading, login, reducesocialbatch }) => ({
  reduceempsocial,
  loading: loading.models.reduceempsocial,
  activeKey: reduceempsocial.activeKey,
  expandForm: reduceempsocial.expandForm,
  formFieldsValue: reduceempsocial.formFieldsValue,
  pageData: reduceempsocial.pageData,
  proPageData: reduceempsocial.proPageData,
  login,
  proFormFieldsValue: reduceempsocial.proFormFieldsValue,
  reducesocialbatch,
}))(Form.create()(BasicList));
